<template>
  <div class="hello">
    <el-container>
      <el-header style="padding-left:35%;margin-top:100px">
        <img src="@/assets/image/hospital.png" style="height:80px;" />
        <img src="@/assets/image/txt.png" style="height:80px;" />
      </el-header>
      <el-main style="margin-bottom:90px">
        <el-form
          :model="userForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="padding-top:40px;
           padding-right:30px;
           padding-bottom:30px;
           margin-top:30px; 
           width: 40%; 
           margin-left:30%; 
           border-radius: 4px; 
           box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="userForm.name" placeholder="用户名应小于10个字符" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" placeholder="请牢记密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="用户类型" prop="type" >
            <el-select v-model="userForm.type" placeholder="未选择" style="width: 100%">
              <el-option label="挂号收费处" value="guahao"></el-option>
              <el-option label="财务管理员" value="caiwu"></el-option>
              <el-option label="系统管理员" value="xitong"></el-option>
              <el-option label="药房医生" value="yaofang"></el-option>
              <el-option label="门诊医生" value="menzhen"></el-option>
              <el-option label="医技医生" value="yiji"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:30%"  icon="el-icon-s-promotion" @click="login('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>© DUT附属第二医院</el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "HelloWorld",
  data() {
    return {
      userForm: {
          name: '',
          type: '',
          password: ''
        },
        rules: {
          name: [
            { required: true, message: '用户名不能为空！', trigger: 'blur' },
            { max: 10, message: '长度不得大于10个字符！', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择用户类型！', trigger: 'blur' }
          ],
          password: [
            {required: true, message: '密码不能为空！', trigger: 'blur' }
          ]
        }
    };
  },
  methods:{
    login: function(Form){
      this.$refs[Form].validate(valid => {
        if (valid) {
          console.log(Form);
          let user = JSON.stringify({
            userId: this.userForm.name,
            password: this.userForm.password,
            userType: this.userForm.type
          });
          console.log(user);
          axios.get('/api/user/login',{
            params: {
              'userId': this.userForm.name
            }
            })
          .then(response=>{
            console.log(response.data);
            let find=response.data;
            console.log(find.password);
            console.log(this.userForm.password);
            console.log(find.password==this.userForm.password);
            if(find.password==this.userForm.password){
              if(find.userType=='xitong'){

              }else if(find.userType=='caiwu'){

              }else if(find.userType=='menzhen'){

              }else if(find.userType=='yiji'){
                if(find.userType!=this.userForm.type){
                  this.$message({
                    showClose: true,
                    message: '用户类型不符',
                    type: 'warn'
                  });
                  console.log("type error!");
                }else{
                  sessionStorage.setItem("user",JSON.stringify(find));
                  this.$router.push({path: '/yiji', replace: true});
                }
              }else if(find.userType=='guahao'){

              }else if(find.userType=='yaofang'){
                if(find.userType!=this.userForm.type){
                  this.$message({
                    showClose: true,
                    message: '用户类型不符',
                    type: 'warn'
                  });
                  console.log("type error!");
                }else{
                  sessionStorage.setItem("user",JSON.stringify(find));
                  this.$router.push({path: '/yaofang', replace: true});
                }
              }
            }else{
              this.$message({
                showClose: true,
                message: '密码错误',
                type: 'error'
              });
              console.log("password error!");
            }
          }).catch(function(error){
            console.log(error);
          });
        }else{
          console.log("submit error!");
        }
      })
        
      
    },
    
    post: function(){
      let user = JSON.stringify({
        userId: 'zhao',
        password: 'zhao',
        name: 'jianrui',
        deptId: 'NK',
        userType: '门诊医生',
        isDoc: '1'
                });
      axios.post('/api/user/add',user,{
                        headers: {
                            "Content-Type": "application/json;charset=utf-8"  //头部信息
                        }
                    }
      )
      .then(response=>{
        console.log(response.data);
        this.info=response.data;
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#hello {
  height: 600px;
}

.el-header {
  color: #333;
  text-align: left;
  line-height: 100px;
}
.el-footer {
  background-color: darkgrey;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  color: #333;
  text-align: center;
  line-height: 460px;
}
</style>
